<template>
  <div class="edit-page-title w100 h100">
    <div class="edit-page-btn">
      <div class="editpage-left__btn">
        <el-button
          class="btn-text-blue"
          size="mini"
          @click="goBackPage"
          icon="el-icon-back"
          >返回</el-button
        >
      </div>
      <div class="edit-page-btn__text">
        <slot name="contentText"></slot>
      </div>
      <div class="editpage-right__btn">
        <template v-for="(item, index) in rightBtn">
          <el-button
            :key="index"
            class="btn-text-blue"
            type="plain"
            size="mini"
            @click="item.methods"
            v-if="!item.hide"
            :icon="item.icon"
            >{{ item.text }}</el-button
          >
        </template>
      </div>
    </div>
    <div class="edit-page-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rightBtnArr: {
      type: Array,
      default: () => {
        return [{}];
      },
    },
  },
  data() {
    return {
      rightBtn: [],
    };
  },
  created() {
    this.init();
  },
  watch: {
    rightBtnArr: {
      handler(val) {
        this.init();
      },
      deep: true,
    },
  },
  methods: {
    init() {
      this.rightBtn = this.rightBtnArr;
    },
    goBackPage() {
      this.$emit("goBackPage", true);
    },
    tosubmit() {
      this.$emit("tosubmit", true);
    },
  },
};
</script>

<style lang="less" scoped>
.edit-page-title {
  .edit-page-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f2f6fa;
    background: white;
  }
  .edit-page-content {
    height: calc(100% - 47px);
    overflow-y: auto;
  }
  .edit-page-btn__text {
    font-size: 14px;
    font-weight: 400;
  }
}
</style>
